<template>
	<view class="accountLogin">
		<u-form :model="loginSubmitInfo">
			<u-form-item :label-style="labelStyle" label-position="top" label="手机号">
				<u-input type="number" maxlength="11" v-model="loginSubmitInfo.phone" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item :label-style="labelStyle" label-position="top" label="验证码">
				<u-input type="number" v-model="loginSubmitInfo.validCode" placeholder="请输入密码" />
				<view class="validCode">
					<view @click.stop="getValidCoded" v-if="validCodeList.disableValidCode"
						class="ff-color-confirm ff-font-16">{{ validCodeList.validCodeText }}</view>
					<view v-else class="ff-color-cancel">{{ validCodeList.validTimeText }}</view>
				</view>
			</u-form-item>
		</u-form>
		<view class="accountLogin-butList">
			<view><u-button type="primary" shape="circle" @click="submitClick">登录</u-button></view>
			<view class="ff-margin-top-20"><u-button type="warning" shape="circle" @click="registerGo">注册</u-button>
			</view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'accountLogin',
		data() {
			return {
				// 倒计时系列内容
				validCodeList: {
					disableValidCode: true, // 按钮是否可以点击
					validCodeText: '点击获取验证码', // 获取验证码
					validTimeText: '60秒', // 倒计时文案
					count: 60, // 倒计时秒数
					timer: null // 定时器
				},
				// 登录需要提交的内容
				loginSubmitInfo: {
					phone: '',
					validCode: '',
					loginType: 1
				},
				labelStyle: {
					'font-size': '36rpx',
					'font-weight': 600
				}
			};
		},
		methods: {
			...mapMutations(['setUserInfo', 'setRoleStatus']),
			// 点击获取短信验证码----发送短信验证码
			getValidCoded() {
				if (!this.$check.isMobile(this.loginSubmitInfo.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('正在获取验证码···'); // 打开loading动画
				this.$http
					.get({
						url: `/sys/user/sendLoginCode/${this.loginSubmitInfo.phone}`
					})
					.then(res => {
						// console.log('获取短信验证码----', res);
						if (res.code == 200 && res.data) {
							this.$refs.uToast.show({
								title: '验证码发送成功',
								type: 'success'
							});
							this.validCodeList.count = 60;
							this.validCodeList.disableValidCode = false;
							this.validCodeList.timer = setInterval(() => {
								if (this.validCodeList.count > 0 && this.validCodeList.count <= 60) {
									this.validCodeList.validTimeText = this.validCodeList.count + '秒';
									this.validCodeList.count--;
								} else {
									this.validCodeList.disableValidCode = true;
									this.validCodeList.validCodeText = '重新获取';
									this.validCodeList.validTimeText = '60秒';
									clearInterval(this.validCodeList.timer);
									this.validCodeList.timer = null;
								}
							}, 1000);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},
			// 短信验证码登录
			submitClick() {
				if (!this.$check.isMobile(this.loginSubmitInfo.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号',
						type: 'error'
					});
					return;
				}
				if (!this.loginSubmitInfo.validCode) {
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('登录中···'); // 打开loading动画
				this.$http
					.post({
						url: '/loginV2',
						data: this.loginSubmitInfo
					})
					.then(res => {
						// console.log('短信验证码登录后返回的数据------', res);
						if (res.code == 200 && res.success && res.data.multipleUsers !== null) {
							// 多账号登录
							let params = {
								multipleUsers: res.data.multipleUsers,
								loginSubmitInfo: this.loginSubmitInfo
							};
							this.$emit('multiPhoneLogin', params);
						} else if (res.code == 200 && res.success) {
							uni.setStorageSync('isUserState', true); // 登录状态
							this.setUserInfo(res.data.user); // 登录后获取的用户信息
							this.loginHandle(res.data.user); // 登录成功后判断人员类型
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 定义loadingTxt内容
					});
			},
			// 登录后赋值操作
			loginHandle(uerInfo) {
				// console.log('登录后赋值操作', uerInfo)
				let userType = uerInfo.userType; // 1:监管人员  5:单位用户  8:维保人员  10:技术人员
				switch (userType) {
					case 1: // 监管人员
						if (uerInfo.superviseStaff != null && uerInfo.hasOwnProperty('superviseStaff')) {
							// status：(0:未审核 1:已审核 5:已禁用)
							// staffType：(1:救援机构负责人, 2:救援机构专家 ,3:救援机构人员)
							let status = uerInfo.superviseStaff.status;
							let staffType = uerInfo.superviseStaff.staffType;
							if (status == 0) {
								//未审核
								uni.showModal({
									title: '温馨提示',
									content: '您的账号处于待审核状态，请联系您的单位确认审核后再登录！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
								return;
							} else if (status == 5) {
								//已禁用
								uni.showModal({
									title: '温馨提示',
									content: '您的账号已被禁用，请联系管理员！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
								return;
							} else if (status == 1) {
								//已审核
								switch (staffType) {
									case 1: // 监管管理员
										this.setRoleStatus(4);
										break;
									case 2: // 监管员工
									case 3:
										this.setRoleStatus(5);
										break;
									default:
										break;
								}
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '请求服务失败，请及时联系管理员！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							}
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请求服务失败，请及时联系管理员！',
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {}
								}
							})
						}
						break;
					case 5: // 单位
						if (uerInfo.companyStaff != null && uerInfo.hasOwnProperty('companyStaff')) {
							let status = uerInfo.companyStaff.status;
							let staffType = uerInfo.companyStaff.staffType;
							if (status == 0) {
								uni.showModal({
									title: '温馨提示',
									content: '您的账号处于待审核状态，请联系您的单位确认审核后再登录！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
								return;
							} else if (status == 5) {
								//已禁用
								uni.showModal({
									title: '温馨提示',
									content: '您的账号已被禁用，请联系管理员！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							} else if (status == 1) {
								//已审核
								switch (staffType) {
									case 1: // 管理员
										this.setRoleStatus('0');
										break;
									case 5: // 员工
										this.setRoleStatus(1);
										break;
									default:
										break;
								}
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '您没有登录权限！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							}
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请求服务失败，请及时联系管理员！',
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {}
								}
							})
						}

						break;
					case 8: // 维保人员
						if (uerInfo.orgStaff != null && uerInfo.hasOwnProperty('orgStaff')) {
							//机构员工
							let status = uerInfo.orgStaff.status;
							let staffType = uerInfo.orgStaff.staffType;
							if (status == 0) {
								//未审核
								uni.showModal({
									title: '温馨提示',
									content: '您的账号处于待审核状态，请联系您的机构确认审核后再登录！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
								return;
							} else if (status == 5) {
								uni.showModal({
									title: '温馨提示',
									content: '您的账号已被禁用，请联系管理员！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							} else if (status == 1) {
								//已审核
								switch (staffType) {
									case 1: //管理员
										this.setRoleStatus(2);
										break;
									case 5: //员工
										this.setRoleStatus(3);
										break;
									default:
										break;
								}
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '您没有登录权限！',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							}
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请求服务失败，请及时联系管理员！',
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {}
								}
							})
						}
						break;
					case 10: //技术人员
						uni.showModal({
							title: '温馨提示',
							content: '技术人员服务暂未开放！',
							confirmColor: '#3178FF',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {}
							}
						})
						break;
					default:
						break;
				}
				if (userType == 1) {
					this.$pageJump.reLaunch('/pages/supervise/index'); // 跳转到监管页面

				} else {
					this.$pageJump.reLaunch('/pages/homeCentral/Central'); // 跳转到中心页面
				}
			},
			// 去注册
			registerGo() {
				this.$pageJump.navigateTo('/pages/loginRegister/register/loginRegister'); // 跳转到中心页面
			}
		}
	};
</script>

<style lang="scss" scoped>
	.accountLogin {
		.validCode {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 11;
		}

		&-butList {
			margin-top: 115rpx;
		}
	}
</style>